var page = 1;
var rankId = "";
var channel = getQueryString("channel");
$(function () {
    $("div[data-sex='"+ channel +"']").addClass("active").siblings(".sex-btn").removeClass("active");
    getRankConfig(channel);
    $(".back-home").click(function () {
        location.href = "../index.html?channel="+channel;
    });
    $(".sex-btn").click(function () {
        $(this).addClass("active").siblings("div").removeClass("active");
        channel = $(this).attr("data-sex");
        // 重置page，移除列表，显示加载动画，隐藏没有更多提示
        page = 1;
        $(".rank-detail-list ul li").remove();
        getRankList(channel,rankId,page);
    });
    $(".rank-cat-list").on("click","li",function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        $(".rank-detail-list").scrollTop(0);
        // 重置page，移除列表，显示加载动画，隐藏没有更多提示
        page = 1;
        rankId = $(this).attr("data-k");
        $(".rank-detail-list ul li").remove();
        getRankList(channel,rankId,page);
    });
    var fontSize = parseFloat($("html").css("font-size"));
    var contentHeight = document.body.clientHeight - $(".head-wrapper").height() - $(".bottom-nav-wrapper").height() - (18/37.5)*fontSize;
    $(".rank-detail-list").height(contentHeight);
    $(".back-top-wrapper").click(function () {
        $(".rank-detail-list").scrollTop(0);
    });
});

function getRankConfig(channel) {
    $.ajax({
        type:'get',
        url:BASE_URl + "config/rank",
        success:function (data) {
            if(data.success){
                DrawRankConfig(data.data);
                rankId = data.data[0].k;
                getRankList(channel,rankId,page);
            }
        }
    });
}

function DrawRankConfig(data) {
    var html = "";
    for(var i = 0;i < data.length;i ++){
        if(i == 0){
            html += `<li class="active" data-k="${data[i].k}">${data[i].v}<i class="pa left-line"></i></li>` ;
        }else {
            html += `<li data-k="${data[i].k}">${data[i].v}<i class="pa left-line"></i></li>`;
        }
    }
    $(".rank-cat-list ul").html(html);
}

function getRankList(channel,id,pageNo) {
    $.ajax({
        type:'get',
        url:BASE_URl + "rank/one?channel="+channel+"&id="+id+"&page="+pageNo+"&format=full",
        success:function (data) {
            if(data.success){
                DrawRankList(data.data);
                page ++;
            }
        }
    });
}

function DrawRankList(data) {
    var html = "";
    for(var i = 0;i < data.length;i ++){
        html += `<li class="border-1px" onclick="goDetail('${data[i].id}')">
                    <div class="book-wrapper">
                        <div class="book-cover inline"><img src="${data[i].image}" alt="" width="100%" height="100%"></div>
                        <div class="book-detail inline pr">
                            <span class="pa order-num">${(page-1)*20+i+1}</span>
                            <p class="book-name">${data[i].name}</p>
                            <p class="book-desc">${data[i].desc}</p>
                            <p class="status-and-cat clearfix">
                                <span class="fl">${data[i].status}</span>
                                <span class="fr border-1px-all cat">${data[i].cat}</span>
                            </p>
                        </div>
                    </div>
                </li>`;
    }
    $(".rank-detail-list ul").append(html);
    // 若书籍列表没有滚动条，隐藏加载动画
    var viewHeight = $(".rank-detail-list").height()
    var realHeight = $(".rank-scroll").height();
    if(realHeight <= viewHeight){
        $(".load-wrapper").hide();
    }
}

function goDetail(id) {
    location.href = "./detail.html?id=" + id + "&channel=" + channel;
}